<template>
  <div class="shopList">
    <div class="title">
      <img class="backs" src="../../assets/Fill 1@2.88x.png" alt @click="backs">
      {{titles}}
    </div>
    <div class="content">
      <div class="shang">
        <div class="shopsou">
          <p class="inp">
            <img class="in-img" src="../../assets/image/ic_search.png" alt>
            <input class="inpt" @click="getSou" type="text" placeholder="搜索店铺商品">
          </p>
        </div>
        <div class="jiage">
          <ul class="title">
            <li :class="{active:cur==0}" @click="getaxios('shelvesTime',0)">默认</li>
            <li :class="{active:cur==1}" @click="getaxios('salesVolume',1)">销量</li>
            <li :class="{active:cur==2}" @click="getaxios('orderPrice',2)">
              价格
              <img class="xuan" src="../../assets/image/storeNav/ic_sort_defult.png" alt>
            </li>
          </ul>
        </div>
        <div class="prich">
          <p class="pric-left" @click="getPric()">
            <img class="le-img" v-show="stock==1" src="../../assets/image/ic_screenCheck.png" alt>
            <img class="le-img" v-show="stock==2" src="../../assets/image/ic_rectangle1@3x.png" alt>
            <span>仅显示有货</span>
          </p>
          <p class="pric-right" @click="getPage()">
            <img class="ri-img" v-show="tagRecommend==2" src="../../assets/image/ic_rectangle1@3x.png" alt>
            <img class="ri-img" v-show="tagRecommend==1" src="../../assets/image/ic_screenCheck.png" alt>
            <span>推荐</span>
          </p>
        </div>
      </div>
      <div class="xia">
        <ul class="list">
          <li v-for="(item,index) in goodses.goodses" :key="index">
            <div class="li-left">
              <img class="li-img" :src="item.picsUrl" alt>
            </div>
            <div class="li-right">
              <p class="su">{{item.goodsName}}</p>
              <div class="jian">
                <p class="j-left">￥<span class="l-left">{{item.orderPrice}}</span></p>
                <p class="j-right">1批旗帜</p>
              </div>
              <div class="di">
                <p class="d-left">已售{{item.salesVolume}}{{item.quantityUnit}}</p>
                <img class="d-img" src="../../assets/tabbar/ic_cart_default.png" alt="">
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="recom" v-show="tagRecommend==1">
        <img class="re-img" src="../../assets/image/ic_search_no_data.png" alt>
        <p class="wu">无商品可售</p>
      </div>
      <!-- <div class="kong"></div> -->
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "shopList",
  data() {
    return {
      titles: "成都康莱商贸有限公司",
      orderBy: "",
      cur: 0,
      goodses: "",
      page: true,
      pric: true,
      stock: 1,
      tagRecommend: 2
    };
  },
  methods: {
    getSou() {
      this.$router.replace("/sousuo");
    },
    backs(){
      this.$router.back(-1)
    },
    getPric() {
      // this.pric = !this.pric
      // stock
      if (this.stock == 1) {
        this.stock = 2;
        console.log("stock:" + this.stock);
      } else {
        this.stock = 1;
        console.log("stock:" + this.stock);
      }

      this.getAxios();
    },
    getPage() {
      // this.page = !this.page
      if (this.tagRecommend == 2) {
        this.tagRecommend = 1;
        console.log(this.tagRecommend);
      } else {
        this.tagRecommend = 2;
        console.log(this.tagRecommend);
      }
      this.getAxios();
    },
    getaxios(orderBy, index) {
      this.getAxios(orderBy, index);
      this.cur = index;
      console.log(index);
    },
    getAxios(orderBy) {
      axios
        .post("https://web-gateway.newbeescm.com/b2b-app-web/searchGoodsList", {
          cityId: 510100000000,
          countyId: 510116000000,
          dealerId: "14607",
          groupStoreId: 66958,
          merchantId: 14948,
          orderBy,
          orderWay: 0,
          pageNum: 1,
          pageSize: 20,
          provId: 510000000000,
          stationId: 51,
          status: 1,
          stock: this.stock,
          storeId: "15463",
          tagRecommend: this.tagRecommend,
          town: 510116003000
        })
        .then(res => {
          console.log(res);
          if (res.data.status.statusCode === 0) {
            this.goodses = res.data.result;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.$nextTick(() => {
      this.getAxios("shelvesTime", 0);
    });
  }
};
</script>

<style lang="scss" scoped>
.title {
  height: 0.435rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #030303;
  font-size: 0.18rem;
  .backs {
    position: absolute;
    left: 0.14rem;
    bottom: 0.1rem;
    width: 0.1rem;
    height: 0.18rem;
  }
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #ccc;
    height: 1px;
    transform: scale(1, 0.5);
  }
}
.content {
  width: 100%;
  .shang {
    margin-bottom: 1px solid #f2f1f6;
    .shopsou {
      width: 100%;
      background: #dd3333;
      padding: 0.05rem 0;
      .inp {
        width: 92.5%;
        height: 0.3rem;
        background: #fff;
        display: flex;
        align-items: center;
        margin-left: 0.14rem;
        border-radius: 45px;
        box-sizing: border-box;
        .in-img {
          width: 0.16rem;
          height: 0.16rem;
          margin: 0.06rem 0 0.06rem 0.1rem;
        }
        .inpt {
          width: 85%;
          height: 0.25rem;
          outline: none;
          border: none;
          background: none;
          color: #fff;
        }
      }
    }
    .jiage {
      width: 100%;
      height: 0.4rem;
      .title {
        width: 100%;
        height: 0.4rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        li {
          height: 0.4rem;
          font-size: 0.12rem;
          color: #333;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .xuan {
            width: 0.08rem;
            height: 0.08rem;
          }
        }
        .active {
          color: #dd3333;
        }
      }
    }
    .prich {
      width: 100%;
      height: 0.4rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      background: #ddd;
      // background: #ddd;
      padding: 0 0.03rem;
      .pric-left {
        font-size: 0.12rem;
        margin-left: 0.14rem;
        margin-right: 0.1rem;
        .le-img {
          width: 0.1rem;
          height: 0.1rem;
          margin-right: 0.06rem;
        }
      }
      .pric-right {
        font-size: 0.12rem;
        .ri-img {
          width: 0.1rem;
          height: 0.1rem;
          margin-right: 0.06rem;
        }
      }
    }
  }
  .xia {
    width: 100%;
    .list {
      width: 100%;
      overflow: hidden;
      li {
        width: 100%;
        height: 1.2rem;
        padding: 0.1rem 0.14rem;
        display: flex;
        justify-content: center;
        align-content: center;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        .li-left{
          width: 1rem;
          height: 1rem;
          margin-right: 0.1rem;
          .li-img {
            width: 1rem;
            height: 1rem;
          }
        }
        .li-right{
          width: 100%;
          .su{
            font-size: 0.12rem;
            color: #333;
          }
          .jian{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 0.2rem auto;
            .j-left{
              font-size: 0.1rem;
              color: #333;
              margin-right: 0.1rem;
              .l-left{
                font-size: 0.12rem;
                color: #DD3333;
              }
            }
            .j-right{
              font-size: 0.1rem;
              color: #ddd;
            }
          }
          .di{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            .d-left{
              font-size: 0.12rem;
              color: #333;
            }
            .d-img{
              width: 0.18rem;
              height: 0.18rem;
              position: absolute;
              right: 0.14rem;
              top: 0;
            }
          }
        }
      }
    }
  }
  .recom {
    width: 100%;
    height: 4.1rem;
    background: #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .re-img {
      width: 1.14rem;
      height: 0.63rem;
    }
    .wu {
      font-size: 0.12rem;
      color: #eee;
    }
  }
  .kong {
    width: 100%;
    height: 0.5rem;
  }
}
</style>
